<!--
 * @Description:
 * @Author: 崔堂袁
 * @Date: 2021-05-04 00:55:26
 * @LastEditTime: 2021-05-04 22:56:15
-->
<template>
  <div class="plane">
    <div class="formItem">
      <div class="descript">{{$t('lang.plane.name')}}:</div>
      <div class="input">
        <a-input type="text"
                 v-model:value="name">
          <template #suffix>
            <CloseCircleOutlined @click="clearInput('name')" />
          </template>
        </a-input>
      </div>
    </div>
    <div class="formItem">
      <div class="descript">{{$t('lang.plane.width')}}:</div>
      <div class="input">
        <input type="number"
               min="1"
               step="1"
               v-model="width">
      </div>
    </div>
    <div class="formItem">
      <div class="descript">{{$t('lang.plane.height')}}:</div>
      <div class="input">
        <input type="number"
               min="1"
               step="1"
               v-model.lazy="height">
      </div>
    </div>
    <div class="formItem">
      <div class="descript">{{$t('lang.plane.color')}}:</div>
      <div class="input">
        <a-select v-model:value="color"
                  style="width: 120px">
          <a-select-option value="blue">{{$t('lang.color.blue')}}</a-select-option>
          <a-select-option value="green">{{$t('lang.color.green')}}</a-select-option>
          <a-select-option value="purple">{{$t('lang.color.purple')}}</a-select-option>
          <a-select-option value="yellow">{{$t('lang.color.yellow')}}</a-select-option>
          <a-select-option value="red">{{$t('lang.color.red')}}</a-select-option>
          <a-select-option value="pink">{{$t('lang.color.pink')}}</a-select-option>
          <a-select-option value="khaki">{{$t('lang.color.khaki')}}</a-select-option>
          <a-select-option value="white">{{$t('lang.color.white')}}</a-select-option>
          <a-select-option value="yellowgreen">{{$t('lang.color.yellowgreen')}}</a-select-option>
          <a-select-option value="skyblue">{{$t('lang.color.skyblue')}}</a-select-option>
        </a-select>
      </div>
    </div>
    <div class="formItem">
      <div class="descript">{{$t('lang.plane.position')}}:</div>
      <div class="input">
        x: <input type="number"
               v-model="position.x">
        y: <input type="number"
               v-model="position.y">
        z: <input type="number"
               v-model="position.z">
      </div>
    </div>

    <div class="formItem">
      <div class="descript">{{$t('lang.plane.rotationAngle')}}:</div>
      <div class="input">
        x: <input type="number"
               v-model="rotate.x">
        y: <input type="number"
               v-model="rotate.y">
        z: <input type="number"
               v-model="rotate.z">
      </div>
    </div>
  </div>
</template>

<script>
import { CloseCircleOutlined } from '@ant-design/icons-vue'
import { reactive, toRefs } from 'vue'
import { useStore } from 'vuex'
export default {
  components: {
    CloseCircleOutlined
  },
  setup () {
    const store = useStore()
    const planeData = reactive({
      name: null,
      width: 50,
      height: 50,
      color: null,
      position: {
        x: 0,
        y: 0,
        z: 0
      },
      rotate: {
        x: 0,
        y: 0,
        z: 0
      }
    })
    // 清空事件
    const clearInput = (str) => {
      if (str === 'name') planeData.name = ''
    }
    // 将数据保存在vuex中
    const saveData = () => {
      const dataObj = {
        name: planeData.name,
        width: planeData.width,
        height: planeData.height,
        color: planeData.color,
        position: planeData.position,
        rotate: planeData.rotate
      }
      store.commit('modelData/saveData', dataObj)
    }

    return {
      ...toRefs(planeData),
      saveData,
      clearInput
    }
  }
}
</script>

<style lang='less' scoped>
.formItem {
  width: 100%;
  height: 48px;
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  .descript {
    width: 100px;
    flex: 2;
    text-align: end;
    padding: 0 20px 0 0;
  }
  .input {
    width: 100px;
    flex: 3;
    padding: 0 50px 0 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    input {
      width: 50px;
      margin: 0 10px;
      border: 1px solid rgba(0, 0, 0, 0.2);
      outline: none;
      &:hover {
        border-color: @baseColor;
      }
    }
    /deep/.ant-input-suffix {
      color: @activeColor;
      cursor: pointer;
      &:hover {
        color: @baseColor;
      }
    }
  }
}
</style>
